<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>管理后台</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- 引入外部头文件 -->
    <include file="layout/header" />
    <!-- 当前文件定制 -->
    <link rel="stylesheet" href="__PUBLIC__/plugins/datatables/dataTables.bootstrap.css">
    <!-- <link rel="stylesheet" href="__PUBLIC__/plugins/datatables/select.bootstrap.min.css"> -->
    <!-- ／定制结束 -->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body class="hold-transition skin-blue sidebar-mini ">
    <div class="wrapper">
        <!-- 菜单 -->
        <include file="layout/menu" name="超级管理员" />
        <!-- ／导航菜单 -->
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <h1>商家管理<small>商家申请</small></h1>
                <ol class="breadcrumb">
                    <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                    <li><a href="#">管理</a></li>
                    <li class="active">商家</li>
                </ol>
            </section>
            <!-- Main content -->
            <section class="content">
                <if condition="isset($shoplist) neq 0">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="box">
                                <div class="box-header">
                                    <h3 class="box-title">商家申请列表</h3>
                                    <div class="box-tools">
                                        <div class="input-group input-group-sm" style="width: 150px;">
                                            <input type="text" name="table_search" class="form-control pull-right" placeholder="Search">
                                            <div class="input-group-btn">
                                                <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.box-header -->
                                <div class="box-body table-responsive no-padding">
                                    <table class="table table-hover">
                                        <tr>
                                            <th>序号</th>
                                            <th>店名</th>
                                            <td>用户</td>
                                            <td>日期</td>
                                            <td>状态</td>
                                            <th></th>
                                        </tr>
                                        <volist name="shoplist" id="shop">
                                            <tr>
                                                <td>{$i}</td>
                                                <td>{$shop.name}</td>
                                                <td>{$shop.account}</td>
                                                <td>{$shop.time}</td>
                                                <td><span class="label label-warning">待审批</span></td>
                                                <td><a href="__APP__/Home/Superuser/Shop/shopprofile/id/{$shop.shop_id}" target="_blank">详情</a></td>
                                            </tr>
                                        </volist>
                                    </table>
                                </div>
                                <!-- /.box-body -->
                                <div class="box-footer clearfix">
                                    <ul class="pagination pagination-sm no-margin pull-right">
                                        <li><a href="#">&laquo;</a></li>
                                        <li><a href="#">1</a></li>
                                        <li><a href="#">2</a></li>
                                        <li><a href="#">3</a></li>
                                        <li><a href="#">&raquo;</a></li>
                                    </ul>
                                </div>
                            </div>
                            <!-- /.box -->
                        </div>
                    </div>
                    <else /> 
                    {$shop.name}
                    <a href="__APP__/Home/SuperUser/Shop/manageShop/id/{$shop.shop_id}/status/2">同意</a>
                    <a href="__APP__/Home/SuperUser/Shop/manageShop/id/{$shop.shop_id}/status/3">不同意</a>
                </if>
            </section>
        </div>
        <!-- /.col -->
        <include file="layout/copyright" />
    </div>
    <!-- /.content-wrapper -->
    <!-- ./wrapper -->
    <!-- REQUIRED JS SCRIPTS -->
    <!-- 外头文件 -->
    <include file="layout/footer" />
    <!-- 当前定制 -->
    <script src="__PUBLIC__/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="__PUBLIC__/plugins/datatables/dataTables.bootstrap.min.js"></script>
    <!-- DOM 操作 -->
    <script>
    $(document).ready(function() {
        function addSelectInfo() {
            if ($(".dataTables_info").find('.selectInfo').size() > 0);
            else {
                $(".dataTables_info").append("<span class='selectInfo'></span>");
            }
            $('.selectInfo').html("&nbsp;&nbsp;共" + $('.checklist:checked').size() + "项选中");
        }

        function checkSelectAll() {
            if ($('.checklist').size() == $('.checklist:checked').size()) {
                $("#selectAll").prop('checked', true);
            } else {
                $('#selectAll').prop('checked', false);
            }
            addSelectInfo();
        }

        var table = $('#userlist').DataTable({
            "dom": 'lrtip',
            "paging": true,
            "lengthChange": false,
            "searching": true,
            "ordering": false,
            "info": true,
            "autoWidth": true,
            "bFilter": true,
            "columnDefs": [{
                orderable: false,
                targets: 0
            }, {
                orderable: false,
                targets: 1
            }, {
                orderable: false,
                targets: 2
            }], //第一列与第二列禁止排序
            "order": [
                [0, null]
            ],
            "oLanguage": {
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "抱歉， 没有找到",
                "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                "sInfoEmpty": "没有数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "sZeroRecords": "没有检索到数据",
                "sSearch": "搜索:",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "前一页",
                    "sNext": "后一页",
                    "sLast": "尾页"
                }
            },
            initComplete: function() {
                var api = this.api();
                api.columns().indexes().flatten().each(function(i) {
                    if (i != 0 && i != 1) {
                        var column = api.column(i);
                        // var $span = $('<span class="addselect">▾</span>').appendTo($(column.header()))
                        var select = $('<select><option value="">All</option></select>')
                            .appendTo($(column.header()))
                            .on('change', function(evt) {
                                evt.stopPropagation();
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );
                                console.log(val);
                                column.search(val, true, false)
                                    .draw();
                            });
                        column.data().unique().sort().each(function(d, j) {
                            function delHtmlTag(str) {
                                return $.trim(str.replace(/<[^>]+>/g, "")); //去掉html标签
                            }
                            d = delHtmlTag(d)
                                // if(d!='')
                            select.append('<option value="' + d + '">' + d + '</option>')
                                // $span.append(select)
                        });
                    }
                });
            }
        });

        $('#userlist tbody').on('click', 'tr', function(e) {
            stopBubble(e);
            var checkbox = $(this).find("input[type=checkbox]").eq(0);
            if (checkbox != undefined) {
                checkbox.prop('checked', !checkbox.prop('checked'));
                if (checkbox.prop('checked')) $(this).addClass('selected');
                else $(this).removeClass('selected');
            }
            checkSelectAll();
        });

        $('.checklist').on('click', function(e) {
            stopBubble(e);
            checkSelectAll();
            var tr = $(this).parent().parent();
            if ($(this).prop('checked')) tr.addClass('selected');
            else tr.removeClass('selected');
        });

        $("#selectAll").on('click', function(e) {
            stopBubble(e);
            $('.checklist').prop('checked', $(this).prop('checked'));
            var tr = $('.checklist').parent().parent();
            if ($(this).prop('checked')) tr.addClass('selected');
            else tr.removeClass('selected');
            addSelectInfo();
        });

        $('#delete').click(function() {
            // alert( table.rows('.selected').data().length +' row(s) selected' );
            console.log(table.rows('.selected').data());
        });


    });
    </script>
    <!-- ./DOM -->
    <!-- AJAX -->
    <script type="text/javascript">
    $(document).ready(function() {

    });
    </script>
    <!-- /AJAX -->
    <!-- ./定制结束 -->
</body>

</html>